<template>
  <a-modal title="商户信息" :visible="visible" width="1000px" @cancel="visible = false">
    <div class="search">
      <a-form-model :form="form" :label-col="labelCol" :wrapper-col="wrapperCol" @submit.pre.prevent="search">
        <a-space>
          <a-form-model-item label="商户号" prop="mchntNo">
            <a-input placeholder="请输入商户号" v-model="form.mchntNo"></a-input>
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="primary" html-type="submit">查询</a-button>
          </a-form-model-item>
        </a-space>
      </a-form-model>
    </div>
    <a-table :data-source="dataSource" :columns="columns" :pagination="pagination" row-key="mchntNo">
      <template v-slot:operation="text, record, index" v-if="operatorType === 'add' || operatorType === 'edit'">
        <div style="white-space: nowrap">
          <a-button size="small" @click="del(record, index)" type="danger">删除</a-button>
          <a-button size="small" @click="cancelDel(record, index)" type="danger">取消删除</a-button>
        </div>
      </template>
    </a-table>
    <template v-slot:footer>
      <a-space>
        <a-button size="small" @click="visible = false">关闭</a-button>
        <a-button size="small" type="primary" @click="save" v-if="operatorType === 'add' || operatorType === 'edit'">保存</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script>
export default {
  name: 'MerchantList',
  data () {
    return {
      mcNo: '',
      visible: false,
      form: {
        mchntNo: '',
      },
      labelCol: {span: 8},
      wrapperCol: {span: 16},
      dataSource: [],
      columns: [
        {title: "商户号", dataIndex: "mchntNo",},
        {title: "商户名称", dataIndex: "mchntName",},
        {
          title: "状态",
          dataIndex: "mcStatus",
          customRender (text) {
            return text || "正常"
          }
        },
        {
          title: '操作',
          scopedSlots: {customRender: 'operation'}
        }
      ],
      pagination: {
        pageSizeOptions: ['5', '10', '20', '30', '40', '100'],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
      },
      operatorType: ''
    }
  },
  methods: {
    async fetch () {
      const hideLoading = this.$message.loading("加载中...");
      try {
        const res = await this.getMerchants(this.mcNo)
        this.dataSource = res.data.records || [];
        this.$set(this.pagination, "total", +res.data.total);
      } catch (e) {
        this.$message.error('网络错误，请稍后再试！')
        console.error(e)
      }
      hideLoading()
    },
    async getMerchants (mcNo) {
      try {
        let params = {
          mcNo: mcNo || null,
          mchntNo: this.form.mchntNo || null,
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize,
          mchntType: '0'
        };
        return await this.$get('/admin/market/customerManager/getMchntList', params)
      } catch (e) {
        this.$message.error('网络错误，请稍后再试！')
        console.error(e)
      }
    },
    search() {
      this.pagination = Object.assign({} ,{
        current: 1,
        pageSize: 10
      })
      this.fetch();
    },
    async del(record, index) {
      this.$confirm({
        title: '提示',
        content: '确定要删除该商户吗？',
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          this.$set(this.dataSource, index ,{
            ...record,
            mcStatus: '已删除'
          })
        }
      })
    },
    cancelDel(record, index) {
      this.$set(this.dataSource, index ,{
        ...record,
        mcStatus: ''
      })
    },
    show(mcNo, operatorType) {
      this.mcNo = mcNo;
      this.visible = true
      this.operatorType = operatorType
      this.search()
    },
    save () {
      this.$emit('change', this.dataSource.filter(i => !!i.mcStatus).map(i => i.mchntNo).join(','))
      this.visible = false
    }
  }
}
</script>

<style scoped>
.operation {
  margin-bottom: 10px;
}
.page {
  width: 100%;
}
</style>
